<script setup>
import AccessIntercept from '@/components/access-intercept/index.vue'
import IconSimple from '@/components/icon-simple/index.vue'
import {navigateBack, navigateTo, reLaunch} from '@/utils/uni-api-wrap/route'
import {urlParse} from '@/utils/utils'
import {usePages} from '@/hooks/usePages'
import {useMeeting} from '@/hooks/useMeeting'
import ButtonX from '@/components/button-x/index.vue'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import {usePopup} from '@/hooks/usePopup'
import {onReady} from '@dcloudio/uni-app'
import {useSys} from '@/hooks/useSys'
import {fetchNoticeList} from '@/api/banner'
import to from 'await-to-js'
import {onBeforeMount} from 'vue'

const { safeArea } = useSys()
const { meetingDetail, reload } = useMeeting()
const { popup, close, open } = usePopup()
const noticeList = ref([])

const _fetchNoticeList = async () => {
  const [err, result] = await to(fetchNoticeList())
  if (err) return
  noticeList.value = result.data.list
}

const back = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    navigateBack()
  } else {
    reLaunch('/pages/index/index')
  }
}

watch(meetingDetail, detail => {
  // 会议已过期
  if (detail?.activityTime <= Date.now()) open()
})

onBeforeMount(() => {
  _fetchNoticeList()
})

</script>

<template>
  <access-intercept @login-success="reload">
    <view class="sacn-index-page__container">
      <view class="header__container">
        <view class="header__scanBar" :style="{ top: `${safeArea.top + 10}px` }" @click="back">
          <uni-icons class="inline-block-middle" type="left" color="#fff" :size="14"></uni-icons>
          <view class="register__text inline-block-middle">返回</view>
        </view>
        <image class="header__cover" src="/static/images/page-images/bg1.jpg" mode="aspectFill" />
        <image class="header__logo" :style="{ top: `${safeArea.top}px` }"  src="/static/images/page-images/logo.png" mode="aspectFill" />
        <view class="header__serviceTelphone">·服务热线：020-38466559·</view>
        <view class="header__tip">一体化在线服务平台！</view>
        <view class="header__notice" v-if="noticeList.length">
          <view class="notice__innerContainer">
            <swiper class="notice__swiper" vertical autoplay circular>
              <swiper-item class="notice__swiperItem flex-row" v-for="(item, index) in noticeList" :key="item.id">
                <view class="notice__context">公告：{{ item.title }}</view>
<!--                <view class="notice__more">更多</view>-->
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
      <view class="container">
        <view class="list__container">
          <view class="list-item__container flex-row" @click="() => navigateTo(`/pages/scan/project-executor?meeting_id=${meetingDetail?.id}`)">
            <view class="list-item__information">
              <view class="list-item__title">项目方</view>
              <view class="list-item__subtitle">Project Executor</view>
            </view>
            <view class="list-item__iconContainer">
<!--              <icon-simple name="project-executor" :size="50" />-->
            </view>
          </view>
          <view class="list-item__container flex-row" @click="() => navigateTo(`/pages/scan/inviting-guests?meeting_id=${meetingDetail?.id}`)">
            <view class="list-item__information">
              <view class="list-item__title">邀请嘉宾</view>
              <view class="list-item__subtitle">Inviting Guests</view>
            </view>
            <view class="list-item__iconContainer">
<!--              <icon-simple name="inviting-guests" :size="50" />-->
            </view>
          </view>
          <view class="list-item__container flex-row" @click="() => navigateTo(`/pages/scan/member-apply?meeting_id=${meetingDetail?.id}`)">
            <view class="list-item__information">
              <view class="list-item__title">会员单位</view>
              <view class="list-item__subtitle">Member Company</view>
            </view>
            <view class="list-item__iconContainer">
<!--              <icon-simple name="member-company" :size="50" />-->
            </view>
          </view>
          <view class="list-item__container flex-row" @click="() => navigateTo(`/pages/scan/nonmember-apply?meeting_id=${meetingDetail?.id}&payChannels=${JSON.stringify(meetingDetail?.payChannels || [])}`)">
            <view class="list-item__information">
              <view class="list-item__title">非会员单位</view>
              <view class="list-item__subtitle">NonMember Company</view>
            </view>
            <view class="list-item__iconContainer">
<!--              <icon-simple name="nonmember-company" :size="50" />-->
            </view>
          </view>
          <view class="list-item__container flex-row" @click="() => navigateTo(`/pages/scan/special-increase-in-personnel?meeting_id=${meetingDetail?.id}&payChannels=${JSON.stringify(meetingDetail?.payChannels || [])}`)">
            <view class="list-item__information">
              <view class="list-item__title">特别增加人员</view>
              <view class="list-item__subtitle">Special Increase In Personnel</view>
            </view>
            <view class="list-item__iconContainer">
<!--              <icon-simple name="special-increase-in-personnel" :size="50" />-->
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center" :safe-area="false" :is-mask-click="false">
      <template #default>
        <view class="meeting__container">
          <image class="meeting__cover" :src="meetingDetail?.imageUrl" mode="aspectFill" />
          <view class="meeting__name">会议：{{ meetingDetail?.name }}</view>
          <view class="meeting__registrationTime">活动时间：{{ meetingDetail?.activityTimeStr }}</view>
          <view class="meeting__mask">会议已超过截止时间</view>
        </view>
      </template>
    </uni-popup>
  </access-intercept>
</template>

<style scoped lang="scss">
.header__container,
.header__cover {
  width: 100vw;
  height: 524rpx;
}
.header__container {
  position: relative;
  .header__scanBar {
    position: absolute;
    left: 32rpx;
    padding: 5rpx 20rpx 5rpx 10rpx;
    border-radius: 40rpx;
    background-color: rgba(#000, .3);
    .register__text {
      margin-left: 10rpx;
      @include fs28w400(#fff);
    }
  }
  .header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 220rpx;
    height: 220rpx;
  }
  .header__serviceTelphone,
  .header__tip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    @include fs28w400(#fff);
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #ffffff96;
  }
  .header__serviceTelphone {
    bottom: 154rpx;
  }
  .header__tip {
    bottom: 88rpx;
  }
  .header__notice {
    position: absolute;
    left: 20rpx;
    right: 20rpx;
    bottom: 20rpx;
    height: 44rpx;
    border-radius: 10rpx;
    background-color: #fff;
    overflow: hidden;
    .notice__innerContainer,
    .notice__swiper,
    .notice__swiperItem {
      width: 100%;
      height: 100%;
    }
    .notice__innerContainer {
      position: relative;
      box-sizing: border-box;
      padding: 0 30rpx;
      &::before,
      &::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        content: '';
        width: 10rpx;
        height: 10rpx;
        border-radius: 5rpx;
        background-color: #1B5FAB;
        overflow: hidden;
      }
      &::before {
        left: 10rpx;
      }
      &::after {
        right: 10rpx;
      }
    }
    .notice__context,
    .notice__more {
      font-size: 20rpx;
      line-height: 44rpx;
      white-space: nowrap;
      @include text-overflow-lines(1);
    }
    .notice__context {
      flex: 1;
    }
    .notice__more {
      color: #2B8CF7;
    }
  }
}
.container {
  min-height: calc(100vh - 524rpx);
  background-color: #EEE;
  .list__container {
    padding: 20rpx;
    .list-item__container {
      margin-bottom: 20rpx;
      height: 160rpx;
      align-items: flex-start;
      border-radius: 10rpx;
      background: linear-gradient(to bottom, #fff 0%, #EFF5FF 100%);
      overflow: hidden;
      .list-item__information {
        padding-top: 20rpx;
        padding-left: 32rpx;
        flex: 1;
        .list-item__title {
          @include fs36w600;
          text-align: left;
        }
        .list-item__subtitle {
          @include fs28w400;
          text-align: left;
        }
      }
      .list-item__iconContainer {
        position: relative;
        margin: 0 32rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;
        opacity: 0.8;
        //filter: blur(1rpx);
        //-webkit-filter: blur(1rpx);
      }

      &:nth-of-type(1) {
        .list-item__iconContainer {
          //background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/4b373bfafe1a548ffd83f3dc962e98124038148452.png");
          background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/c8c7707783719f65fa1bdf627ec332714645142023.png");
        }
      }
      &:nth-of-type(2) {
        .list-item__iconContainer {
          //background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/219b4e3d97b26b8c04c9d0d44292443d9732153469.png");
          background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/c8c7707783719f65fa1bdf627ec332714645142023.png");
        }
      }
      &:nth-of-type(3) {
        .list-item__iconContainer {
          //background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/9a5c334f88b07cbdbfceb0f4bebf87a21798800510.png");
          background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/c8c7707783719f65fa1bdf627ec332714645142023.png");
        }
      }
      &:nth-of-type(4) {
        .list-item__iconContainer {
          //background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/4f3a94545e51c6e5674c45bddb0c840f4833257491.png");
          background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/c8c7707783719f65fa1bdf627ec332714645142023.png");
        }
      }
      &:nth-of-type(5) {
        .list-item__iconContainer {
          //background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/3751ec242bb23996b6c30f45638d28421111521692.png");
          background-image: url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/59/c8c7707783719f65fa1bdf627ec332714645142023.png");
        }
      }
    }
  }
}
.meeting__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 20rpx;
  width: 650rpx;
  border-radius: 20rpx;
  background-color: #fff;
  overflow: hidden;
  .meeting__cover {
    width: 100%;
    height: 405rpx;
  }
  .meeting__name {
    @include fs36w600;
    text-align: left;
  }
  .meeting__registrationTime {
    @include fs28w600;
    text-align: left;
  }
  .meeting__mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 140rpx 32rpx;
    color: #656464;
    font-size: 48px;
    text-align: center;
    background-color: rgba(#fff, .5);
    z-index: 99;
  }
}
</style>
